<style scoped>
.wraper {
    padding: 0 30px;
}
.search {
    padding-bottom:20px;
}
.search span {
    color:#68777c;
    font-weight: bold;
    padding-right:18px;
}
.search button {
    background-color: #00a8f7;
    color:#fff;
    margin-left:8px;
}
.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 顶部 start */

.wraper .top_card {
    height: 138px;
    text-align: center;
    width: 16.6%;
    padding-left: 7px;
}

.wraper .top_card:first-child {
    padding-left: 0;
}

.wraper .top_card>div {
    background-color: #f8f8f8;
    height: 100%;
}

.wraper .top_card .card_bar {
    width: 100%;
    height: 3px;
}

.wraper .top_card .item {
    font-size: 16px;
    color: #6a747f;
    padding-top: 20px;
    line-height: 40px;
}

.wraper .top_card .result {
    font-size: 30px;
}

/* 顶部 end */

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 
.to-pay-roll{
    display: inline-block;
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}
a.to-pay-roll:hover{
    background-color: #00a8f7;
    color: #fff;
}
a.to-pay-roll.disabled:hover{
    color: #bbbec4;
    background-color: #f7f7f7;
}

/* 分页 end */
</style>

<template>
    <div class="team-performance">
        <product-title></product-title>
        <div class="wraper">
            <div class="search">
                <span>指定搜索</span>
                <DatePicker type="month" v-model="searchForm.datetime" format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="dateChange"></DatePicker>
                <Button @click="search()">查询</Button>
            </div>
            <div class="top">
                <div class="headline clearfix">
                    <p>
                        <span class="red-font">提示</span>：1、“件数”中不包含交叉销售件数；2、正式佣金计算的，手续费为预期估值；3、正式佣金计算后，手续费包含交叉销售佣金；4、本月标保及本月件数，均依据佣金计算月为准。</p>
                </div>
                <div class="clearfix">
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#373737"></div>
                            <p class="item">累计保费(元)</p>
                            <p class="result" style="color:#373737">{{premium_year}}</p>
                        </div>
                    </div>
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#6aefe5"></div>
                            <p class="item">累计手续费(元)</p>
                            <p class="result" style="color:#6aefe5">{{poundage_year}}</p>
                        </div>
                    </div>
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#ff855f"></div>
                            <p class="item">累计件数(件)</p>
                            <p class="result" style="color:#ff855f">{{num_year}}</p>
                        </div>
                    </div>
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#adeda2"></div>
                            <p class="item">本月保费(件)</p>
                            <p class="result" style="color:#adeda2">{{premium_month}}</p>
                        </div>
                    </div>
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#00a8f7"></div>
                            <p class="item">本月手续费(元)</p>
                            <p class="result" style="color:#00a8f7">{{poundage_month}}</p>
                        </div>
                    </div>
                    <div class="top_card fl">
                        <div>
                            <div class="card_bar" style="background-color:#4074e1"></div>
                            <p class="item">本月件数(件)</p>
                            <p class="result" style="color:#4074e1">{{num_month}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail">
                <div class="headline">
                    <p>{{searchForm.date}}业绩明细</p>
                    <p>
                        <span class="red-font">提示</span>：1、本结果以承保日期为准；2、往月手续费如存在负数，则为退保冲账条目；4、如下列手续费明细合计与实发存在差异，以实发为准。</p>
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_detail" :data="data_detail"></Table>
                    <Row class="page fr">
                        <Col span="24">
                        <Page :total="detailTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getPoundage , getPoundageyear } from '../../api/achievement';
export default {
    data() {
        return {
            haslink:false,
            payrolllink:'javascript:;',
            searchForm:{
                date:'',
                page:1,
                pagesize:10,
            },
            page:1,
            pagesize:10,
            premium_year:0,
            num_year:0,
            poundage_year:0,
            premium_month:0,
            num_month:0,
            poundage_month:0,
            detailTotal: 100,
            columns_detail: [
                {
                    title: '保单号',
                    key: 'policy_no',
                    align: 'center',
                },
                {
                    title: '险种',
                    key: 'pname',
                    align: 'center',
                },
                {
                    title: '标准保费（元）',
                    key: 'premium',
                    align: 'center',
                },
                {
                    title: '受理日期',
                    key: 'pay_time',
                    align: 'center',
                },
                {
                    title: '回执日期',
                    key: 'pay_time',
                    align: 'center',
                },
                {
                    title: '承保日期',
                    key: 'pay_time',
                    align: 'center',
                },
                {
                    title: '（预估）手续费 （元） ',
                    key: 'fee_amount',
                    align: 'center',
                }
            ],
            data_detail: [
               
            ],

        }
    },
    components: {
        productTitle
    },
    created() {
        this.getPerformanceYear()
        var _date = new Date()
        this.searchForm.date = _date
        this.searchForm.datetime = _date        
        this.getPerformance()
        var _year = _date.getFullYear()
        var _month = _date.getMonth() + 1
        this.dateChange(_year+'-'+_month)
    },
    mounted () {

    },
    methods: {
        getPerformanceYear(){
            new Promise((resolve, reject) => {
                getPoundageyear().then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.premium_year = response.data.data.premium_year
                        this.num_year = response.data.data.num_year
                        this.poundage_year = response.data.data.poundage_year
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        search(){
            this.getPerformance();
        },
        getPerformance(){
            let _params = this.searchForm;
            new Promise((resolve, reject) => {
                getPoundage(_params).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success(response.data.info);
                        this.data_detail = response.data.data.list;
                        this.detailTotal = response.data.data.total;
                        this.premium_month = response.data.data.statistics.premium_month;
                        this.num_month = response.data.data.statistics.num_month;
                        this.poundage_month = response.data.data.statistics.poundage_month;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        dateChange(date) {
            if(date){
                this.searchForm.date = date
                this.haslink = true
                this.payrolllink = 'http://t.kuaibao365.com/#/team/team_payroll/'+date
                //this.payrolllink = 'http://localhost:8080/#/team/team_payroll/'+date
            }else{
                this.haslink = false
                this.payrolllink = 'javascript:;'
            }
            
        },
        detailPageChange() {

        },
        detailPageSizeChange() {

        },
        // 页码改变
        pageChange(page){
            this.searchForm.page = this.page = page
            this.getPerformance()
        },
        // 每页条数改变
        pageSizeChange(pagesize){
            this.searchForm.pagesize = this.pagesize = pagesize
            this.getPerformance()
        },
    }
}
</script>
